<script setup>
  import { ref, reactive } from 'vue'
  import { updatePasswordAPI } from '@/apis/seller'
  import router from '@/router';
  import { useSellerStore } from '@/stores/sellerStore';
  const sellerStore = useSellerStore()
  const updatePasswordForm = reactive({
    old_pwd: '',
    new_pwd: '',
    re_pwd: '',
  })
  
  const checkRePassword = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('请再次输入密码'))
    } else if (value !== updatePasswordForm.new_pwd) {
      callback(new Error('两次输入密码不一致'))
    } else {
      callback()
    }
  }
  
  const rules = {
    old_pwd: [
      { required: true, message: '原密码不能为空', trigger: 'blur' },
      { min: 5, max: 16, message: '请输入长度5~16的字符', trigger: 'blur' }
    ],
    new_pwd: [
      { required: true, message: '新密码不能为空', trigger: 'blur' },
      { min: 5, max: 16, message: '请输入长度5~16的字符', trigger: 'blur' }
    ],
    re_pwd: [
      { validator: checkRePassword, trigger: 'blur' }
    ]
  }
  
  const passwordForm = ref(null)
  
  const updatePassword = async () => {
    passwordForm.value.validate(async (valid) => {
      if (valid) {
        let res = await updatePasswordAPI(updatePasswordForm)
        if (res.data.code === 0) {
          ElMessage.success(res.data.message ? res.data.message : '修改成功')
          updatePasswordForm.new_pwd = ''
          updatePasswordForm.old_pwd = ''
          updatePasswordForm.re_pwd = ''
          sellerStore.clearSellerInfo()
          router.push('login')
        } else {
          ElMessage.warning(res.data.message ? res.data.message : '修改失败')
        }
      }
    })
  }
  </script>

<template>
    <div class="minimal-container">
      <h2 class="form-title">修改密码</h2>
      <p class="form-subtitle">请谨慎操作，修改密码后需要重新登录</p>
      
      <el-form 
        label-position="top"
        :model="updatePasswordForm" 
        ref="passwordForm"
        :rules="rules"
        class="minimal-form"
      >
        <el-form-item label="原密码" prop="old_pwd">
          <el-input 
            v-model="updatePasswordForm.old_pwd" 
            type="password" 
            placeholder="请输入原密码"
            show-password
            class="compact-input"
          />
        </el-form-item>
  
        <el-form-item label="新密码" prop="new_pwd">
          <el-input 
            v-model="updatePasswordForm.new_pwd" 
            type="password"
            placeholder="5-16位字母、数字组合"
            show-password
            class="compact-input"
          />
        </el-form-item>
  
        <el-form-item label="确认新密码" prop="re_pwd">
          <el-input 
            v-model="updatePasswordForm.re_pwd" 
            type="password"
            placeholder="请再次输入新密码"
            show-password
            class="compact-input"
          />
        </el-form-item>
  
        <el-form-item class="compact-submit">
          <el-button 
            type="primary" 
            @click="updatePassword"
            class="submit-btn"
          >
            确认修改
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  
  
  <style scoped lang="scss">
  .minimal-container {
    background-color: #fff;
    padding: 20px;
    max-width: 100%;
  }
  
  .form-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 6px;
  }
  
  .form-subtitle {
    color: #909399;
    font-size: 12px;
    margin-bottom: 16px;
  }
  
  .minimal-form {
    :deep(.el-form-item) {
      margin-bottom: 16px;
    }
    
    :deep(.el-form-item__label) {
      font-size: 13px;
      color: #606266;
      padding-bottom: 4px;
      line-height: 1.2;
    }
  }
  
  .compact-input {
    :deep(.el-input__wrapper) {
      padding: 6px 12px;
      font-size: 13px;
      height: 34px;
      box-shadow: 0 0 0 1px #dcdfe6 inset;
      border-radius: 3px;
      
      &:hover {
        box-shadow: 0 0 0 1px #c0c4cc inset;
      }
      
      &.is-focus {
        box-shadow: 0 0 0 1px var(--el-color-primary) inset;
      }
    }
    
    :deep(::placeholder) {
      font-size: 12px;
    }
  }
  
  .compact-submit {
    margin-top: 12px;
    margin-bottom: 0;
    
    .submit-btn {
      width: 120px;
      font-size: 13px;
      padding: 8px 16px;
      height: 34px;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 1px 6px rgba(24, 144, 255, 0.3);
      }
    }
  }
  
  @media (max-width: 768px) {
    .minimal-container {
      padding: 16px;
    }
    
    .compact-input {
      :deep(.el-input__wrapper) {
        height: 32px;
      }
    }
    
    .compact-submit .submit-btn {
      width: 100%;
    }
  }
  </style>